<template>
  <view>
    <my-goods v-for="item in goodsList" :key="item.goods_id" :goods="item" />
  </view>
</template>

<script>
export default {
  data () {
    return {
      queryObj: {
        query: '',
        cid: '',
        pagenum: 1,
        pagesize: 10
      },
      goodsList: [],
      total: 0, // 总条数
      // 用来控制是否正在上拉加载
      isLoadingMore: false
    }
  },
  onLoad (options) {
    this.queryObj.query = options.query || ''
    this.queryObj.cid = options.cid || ''
    this.getGoodsListData()
  },
  // 下拉刷新, 必须在页面或是全局配置中开启下拉刷新(pages.json中去配置 "enablePullDownRefresh": true)
  onPullDownRefresh () {
    console.log('---onPullDownRefresh---')
    // 下拉的核心逻辑就是，把之前的模型重置为最初的状态，然后加载第一页
    this.goodsList = []
    this.queryObj.pagenum = 1
    this.total = 0
    this.getGoodsListData(true)
  },
  // 上拉加载,如果我们需要修改滚动到地下多少的时候触发，这个时候就可以设置 onReachBottomDistance
  onReachBottom () {
    console.log('------onReachBottom-------')
    // 防止快速上下来回滚动时候的bug
    if (this.isLoadingMore) return
    // 如果已经加载完毕了，就提示
    if (this.goodsList.length >= this.total) {
      uni.showToast({
        title: '没有更多数据啦~',
        icon: 'none'
      })
      return
    }
    // 核心逻辑页面++，然后加载新一页数据
    this.queryObj.pagenum++
    this.getGoodsListData()
  },

  methods: {
    // isPullDown 给它赋默认值，如果没有传，它的值就是false
    async getGoodsListData (isPullDown = false) {
      this.isLoadingMore = true
      const res = await uni.$request({
        url: 'goods/search',
        data: this.queryObj,
        isPullDown
      })

      if (res.meta.status === 200) {
        this.isLoadingMore = false
        // 我们上拉加载更多的时候，要记得把返回的数据进行累加
        this.goodsList = [...this.goodsList, ...res.message.goods]
        this.total = res.message.total
        // 如果是下拉刷新，数据获取完毕之后，停止下拉加载的效果
        if (isPullDown) {
          uni.stopPullDownRefresh()
        }
      }
    }
  }
}
</script>
